<template>
  <div class="login">
    <van-nav-bar
      title="账号登录"
      left-text=""
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="loginmain">
      <div class="loginimg">
        <van-image radius="30" :src="require('../../assets/logo.png')" />
      </div>
      <van-cell-group :border="false">
        <van-field
          :border="false"
          v-model="uname"
          placeholder="用户名/手机号/邮箱"
        />
        <br />
        <van-field
          v-if="isshow"
          :border="false"
          v-model="upwd"
          placeholder="密码"
          type="password"
          @click-right-icon="show"
          @keyup.enter="login"
          right-icon="browsing-history-o"
        />
        <van-field
          v-else
          :border="false"
          v-model="upwd"
          placeholder="密码"
          type="text"
          right-icon="browsing-history"
          @click-right-icon="show"
          @keyup.enter="login"
        />
        <span class="logspan">忘记密码？</span>
      </van-cell-group>
      <div class="btncss">
        <van-button
          round
          type="primary"
          size="large"
          color="#ffa302"
          @click="login"
          >登入</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uname: "",
      upwd: "",
      error: "",
      isshow: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/register");
    },
    show() {
      this.isshow = !this.isshow;
    },
    login() {
      if (this.uname == "" || this.upwd == "") {
        this.$toast.fail("用户名/密码不能为空！");
      } else {
        this.axios
          .post("/users/login", `uname=${this.uname}&upwd=${this.upwd}`)
          .then((result) => {
            if (result.data.code == 200) {
              console.log(result.data.result);
              this.$toast.success("登入成功");
              this.$store.commit("setUserid", result.data.result.uid);
              this.$store.commit("setUsername", result.data.result.uname);
              sessionStorage.setItem("id", result.data.result.uid);
              sessionStorage.setItem("islogin",1);
              sessionStorage.setItem("username", result.data.result.uname);
              this.$router.push("/personal");
            } else if (result.data.code == 201) {
              this.$toast.fail("登入失败,用户名或密码错误！");
            }
          });
      }
    },
  },
};
</script>

<style lang="scss">
.login {
  .loginmain {
    margin: 0 auto;
    width: 70%;
  }
  .van-nav-bar__text {
    color: black;
    font-weight: 500;
    font-size: 16px;
  }
  .van-icon-arrow-left::before {
    color: black;
  }
  .loginimg {
    text-align: center;
    padding: 50px 30px 30px;
  }
  .btncss {
    margin-top: 15px;
  }
  .van-cell {
    border-bottom: 1px solid #d4d6d9;
  }
  .logspan {
    color: #ffa302;
    font-size: 12px;
    padding-left: 16px;
  }
}
</style>